<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <hminput placeholder="请输入11位手机号码" :rules="/^1\d{10}$/" v-model="username" @getval="getusername"></hminput> -->
        <hminput
          msg="请输入11位手机号码"
          placeholder="请输入11位手机号码"
          :rules="/^1\d{10}$/"
          v-model="user.username"
          type="text"
        ></hminput>
        <hminput
          msg="请输入3-16位密码"
          placeholder="请输入密码"
          type="password"
          :rules="/^.{3,16}$/"
          v-model="user.password"
        ></hminput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <div class="btnlogin">
        <loginbutton type="primary" @click="login"></loginbutton>
        <!-- @click.native   native 监听子组件的事件 -->
        <!-- <loginbutton type="primary" @click.native="login"></loginbutton> -->
      </div>
    </div>
  </div>
</template>

<script>
import loginbutton from "@/component/hm-button.vue";
import hminput from "@/component/hm-input.vue";
import { userlogin } from "@/api/user.js";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "123456",
      },
    };
  },
  components: {
    loginbutton,
    hminput,
  },
  methods: {
    login() {
    //   console.log(this.username, this.password);
    if(/^.{3,16}$/.test(this.user.password) && /^1\d{10}$/.test(this.user.username)){
        userlogin(this.user).then(res=>{
            console.log(res);
            if(res.data.message){
                console.log('登录成功');
                //跳转首页
            }else{

            }
        })
    }else{
        console.log('提示用户数据输入不合法');
    }
    },
    // getusername(data){
    //     this.username = data
    // }
  },
};
</script>

<style lang="less">
.container {
  padding: 20px;
}
.close {
  span {
    font-size: (40vw/360 * 100);
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126vw/360 * 100);
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
    padding: 12px 0;
    border: 0px;
    border-bottom: 1px solid #ccc;
    outline: none;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>